<template>
  <div class="page_content">
    <div v-if="isPageLoading" class="page_loading fixed">
      <van-loading size="24px" vertical color="#fff">加载中...</van-loading>
    </div>
    <header>
      <van-nav-bar class="main_header" title="团体信息">
        <template #left>
          <span @click="goBack">返回</span>
        </template>
        <template #right>
          <span @click="submitTeamInfo">确定</span>
        </template>
      </van-nav-bar>
    </header>
    <div class="main_content">
      <edit-team ref="editTeam" :team-data="teamInfo" :is-default-check="teamInfo.isApproved" :organization-units-types="dict.delegationType" />
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import {
  api_GET_EventsManagementDelegationId,
  api_PUT_EventsManagementDelegationId,
  api_POST_EventsManagementDelegation
} from '@/extend/api/gameswaggerApi/app';
import EditTeam from '@/viewMobile/components/DelegationInfo';
export default {
  components: {
    EditTeam
  },
  data() {
    return {
      isPageLoading: false,
      teamInfo: {},
      organizationUnitsTypes: [{ code: 'Club', name: '道馆' }]
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      currentUserType: state => state.user.currentUserType
    })
  },
  watch: {
    currentUserType: {
      handler(val) {
        if (!val) return;
        this.getTeamInfo();
      }
    }
  },
  created() {
    this.getDict();
    this.gameId = this.$route.params.id;
    if (this.currentUserType) {
      this.getTeamInfo();
    }
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 获取团体信息
    getTeamInfo() {
      if (!this.currentUserType.delegationId) return;
      api_GET_EventsManagementDelegationId(
        this.currentUserType.delegationId,
        { IncludeDelegationType: true }
      ).then(res => {
        this.teamInfo = res;
        console.log(res);
        this.$store.dispatch('user/getCurrentUserTeamInfo', res);
      }, error => {
        this.$toast.fail(`获取团体信息失败！${error.error.message}`);
      });
    },
    goBack() {
      this.$router.push({
        path: `/myCenter${this.gameId && '/' + this.gameId || ''}/team`
      });
    },
    submitTeamInfo() {
      this.$refs.editTeam.getcreateDelegationInputVO().then(createDelegationInputVO => {
        if (createDelegationInputVO.imagePath) {
          const _delegationId = this.currentUserType.delegationId;
          this.isPageLoading = true;
          if (_delegationId) {
            this.updateDelegationInfo(createDelegationInputVO);
          } else {
            this.createDelegationInfo(createDelegationInputVO);
          }
        } else {
          this.$toast({ type: 'fail', message: `请上传团体标志` });
        }
      });
    },
    // 创建团体
    createDelegationInfo(createDelegationInputVO) {
      api_POST_EventsManagementDelegation(createDelegationInputVO).then(res => {
        this.isPageLoading = false;
        this.$store.dispatch('user/getCurrentUserTeamInfo', res);
        this.$store.dispatch('user/getInfo');
        this.$store.dispatch('user/getCurrentUserType');
        this.$toast.success(`创建团体信息成功！`);
      }, error => {
        this.isPageLoading = false;
        this.$toast.fail(`创建团体信息成功！${error.error.message}`);
      });
    },
    // 更新团体信息
    updateDelegationInfo(createDelegationInputVO) {
      api_PUT_EventsManagementDelegationId(this.currentUserType.delegationId, createDelegationInputVO).then(res => {
        this.isPageLoading = false;
        this.$store.dispatch('user/getCurrentUserTeamInfo', res);
        this.$toast.success(`更新团体信息成功！`);
      }, error => {
        this.isPageLoading = false;
        this.$toast.fail(`更新团体信息失败！${error.error.message}`);
      });
    }
  }
};
</script>
